<!-- 首页 -->
<template>
  <!-- 面包屑 -->
  <breadCrumb :item="item" ref="breadcrumb"></breadCrumb>
  <!-- 首页外壳 -->
	<div class="home-wrapped">
    <!-- 1. 轮播图外壳 -->
		<div class="swiper-wrapped">
      <!-- :interval="4000"：设置轮播的自动切换时间间隔 -->
      <!-- indicator-position="outside"：将轮播的指示器（小圆点或其他指示符号）显示在轮播区域的外部; type="card"：指定轮播的类型为 “卡片” 样式 -->
       <!-- 从交互上来说，卡片模式和一般模式的最大区别在于，卡片模式可以通过直接点击两侧的幻灯片进行切换 -->
      <el-carousel :interval="3000" indicator-position="outside" type="card" height="220px">
				<el-carousel-item v-for="(item,index) in imageUrl" :key="index">
					<img :src="item" class="swiper" />
			  </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 2. 栅格布局外壳 -->
		<div class="layout-wrapped">
      <!-- <el-row :gutter="20">：创建了一行，gutter="20" 表示行内列之间的间距为 20 -->
      <el-row :gutter="20">
        <!-- :span="6" 表示每列占据 6 份的宽度 -->
				<el-col :span="6" v-for="(item,index) in companyIntroduce" :key='index' @click="openIntroduce(index+1)">
					<div class="company-message-area">
						<span>{{item.set_name}}</span>
						<div v-html='item.set_text' class="company-introduce"></div>
					</div>
				</el-col>
			</el-row>
    </div>

    <!-- 3. 表格外壳 -->
		<div class="two-table-wrapped">
      <!-- 3-1. 公司公告 -->
			<div class="company-notice">
        <span class="title">公司公告</span>
        <!-- :show-header='false' 表示不显示表头，@row-dblclick="openCompany" 为双击行的事件处理函数 -->
				<el-table :data="companyData" style="width: 100%" :show-header='false' @row-dblclick="openCompany">
          <!-- prop 指定了对应的数据字段为 message_title ，label 为列的标题 “公告主题” -->
					<el-table-column prop="message_title" label="公告主题">
						<template #default='{row}'>
							<div class="message_title">{{row.message_title}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="message_level" label="等级">
						<template #default='{row}'>
							<el-tag class="mx-1" round v-if="row.message_level=='一般'">{{row.message_level}}</el-tag>
							<el-tag type="warning" class="mx-1" round
								v-if="row.message_level=='重要'">{{row.message_level}}</el-tag>
							<el-tag type="danger" class="mx-1" round
								v-if="row.message_level=='必要'">{{row.message_level}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="message_publish_department" label="发布部门" />
					<el-table-column prop="message_publish_time" label="发布时间" width="200">
						<template #default="{row}">
							<div>{{row.message_publish_time?.slice(0,10)}}</div>
						</template>
					</el-table-column>
				</el-table>
      </div>

      <!-- 3-2 系统消息 -->
			<div class="system-message">
        <span class="title">系统消息</span>
				<el-table :data="systemData" style="width: 100%" :show-header='false' @row-dblclick="openSystem">
					<el-table-column prop="message_title" label="公告主题"  />
					<el-table-column prop="message_publish_time" label="发布时间" width="200">
						<template #default="{row}">
              <!-- 截取了时间字符串的前 10 位进行显示 -->
							<div>{{row.message_publish_time?.slice(0,10)}}</div>
						</template>
					</el-table-column>
				</el-table>
      </div>
    </div>
  </div>

	<!-- 弹窗 -->
	<introduce ref="intro"></introduce>
	<common ref="common_msg"></common>
</template>
 
<script setup lang="ts">
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import breadCrumb from '@/components/bread_crumb.vue';
	import { getAllSwiper, getAllCompanyIntroduce } from '@/api/setting';
	import { bus } from "@/utils/mitt.js";
	import introduce from './components/introduce.vue';
	import { companyMessageList,systemMessageList} from '@/api/message';
	import common from '@/components/common_msg.vue';
	import { updateClick } from '@/api/message.js';  // 更新点击量
	import { changeUserReadListButDeleteById } from '@/api/dep_msg.js';
	import { useMsg } from '@/store/message.js';

	const msgStore = useMsg()
  
	const breadcrumb = ref() // 面包屑
	const item = ref({       // 面包屑参数
		first: '首页',
	})

  // 轮播图
	const imageUrl = ref([])
	const returnAllSwiper = async () => {
    const res = await getAllSwiper()
		imageUrl.value = res.data
	}
	returnAllSwiper()

  // 公司介绍 
	const companyIntroduce = ref([])
	const returnAllCompanyIntroduce = async () => {
    const res = await getAllCompanyIntroduce()
		// console.log(res);
		// .slice(0, -1) 去掉“公司名称”这个数组项，应该是写数据库这个写最晚的问题，或者用解构 const [name,...intro] = res.data
		companyIntroduce.value = res.data.slice(0, -1)
	}
	returnAllCompanyIntroduce()

	// 打开公司介绍弹窗
	const intro = ref()
	const openIntroduce = (id : number) => {
		bus.emit('introduce', id)  
	}

  // 公司公告
	const companyData = ref()
	// 系统消息
	const systemData = ref()

	const getMessageList = async () =>{
		const resC = await companyMessageList()
		companyData.value = resC.data
		const resS = await systemMessageList()
		systemData.value = resS.data
	}
	getMessageList()

	// 双击
	const common_msg = ref()
  const openCompany = async(row:any) => {
		await updateClick(row.message_click_number, row.id)
		await changeUserReadListButDeleteById(localStorage.getItem('id'), row.id, localStorage.getItem('department'))   
		msgStore.returnReadList(localStorage.getItem('id'))  // ??
		bus.emit('homeCompany', row)
		common_msg.value.open()
  }

  const openSystem = async(row:any) => {
		await updateClick(row.message_click_number, row.id)
		await changeUserReadListButDeleteById(localStorage.getItem('id'), row.id, localStorage.getItem('department')) 
		msgStore.returnReadList(localStorage.getItem('id'))  // ??
    bus.emit('homeSystem', row)
		common_msg.value.open()
  }
</script>
 
<style lang="scss" scoped>
	@mixin table-class {
		height: 232px;
		width: 48%;
		display: flex;
		flex-direction: column;
	}

	// 首页外壳
	.home-wrapped {
		padding: 0 8px;
		height: calc(100vh - 96px);
		background: #f5f5f5;
		display: flex;
		flex-direction: column;

		// 轮播图外壳
		.swiper-wrapped {
			padding: 0 20px;
			background: #fff;
			margin-bottom: 8px;

			.swiper {
				width: 100%;
				height: 100%;
			}
		}

		// 栅格布局外壳
		.layout-wrapped {
			padding: 8px;
			margin-bottom: 8px;
			background: #fff;

			// 公司信息区域
			.company-message-area {
				background: #f5f5f5;
				height: 200px;
				padding: 8px;
				cursor: pointer;

				span {
					border-bottom: 1px solid #409eff;
					font-size: 14px;
				}

				.company-introduce {
					text-indent: 24px;
					font-size: 14px;
					overflow: hidden;
					text-overflow: ellipsis;
          // -webkit-line-clamp CSS 属性允许将块容器的内容限制为指定的行数
          line-clamp: 3;
					-webkit-line-clamp: 3;  // 这个前面得要定义 line-clamp: 3;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}

			.company-message-area:hover {  // 鼠标移入会变色
				cursor: pointer;
				background-color: #eef5ff;
			}
		}

		// 表格外壳
		.two-table-wrapped {
			height: 232px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: #fff;

			// 公司公告
			.company-notice {
				@include table-class
			}

			// 系统消息
			.system-message {
				@include table-class
			}

			.title {
				font-size: 14px;
				margin-bottom: 5px;
				border-bottom: 1px solid #ea0709;
			}
		}
	}

	.message_title {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	// 轮播图默认样式
	.el-carousel__item h3 {
		color: #475669;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
		text-align: center;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}
</style>
